<html>
<head>
    <meta charset="utf-8">
    <title>角色维护</title>
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../res/layui-v2.5.6/css/layui.css">
    <script type="text/javascript" src="/res/js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="../../../res/eleTree/eleTree/eleTree.css" media="all">
    <link rel="stylesheet" href="../../../res/css/bootstrap.css" media="all"/>
    <script src="../../../res/layui-v2.5.6/layui.js"></script>
    <style>

        .layui-tree-iconArrow:after{
            border-width: 6px;
            font-size: 18px;
            border-color: transparent transparent transparent  rgb(238, 197, 145);;
        }
        .layui-tree-entry{
            height: 25px;
        }
        #test13{
            padding-left: 20px;
        }
    </style>
</head>
<body>

<form class="layui-form" action="" style="margin-top: 20px;" method="post" lay-filter="myfrom" id="myfrom1">
    <input type="hidden" name="roleId" id="roleId">
    <input type="hidden" name="rank">
<!--    <input type="hidden" name="moduleAll" id="moduleAll">-->
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 130px;text-align: right;">角色名称</label>
        <div class="layui-input-block">
            <input type="text" id="roleName" name="roleName" maxlength="20" lay-verify="required" style="width: 280px;" placeholder="请输入名称"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"  style="width: 130px;text-align: right;">禁改，删的角色</label>
        <div class="layui-input-block">
            <input type="text" id="roleRank1" name="roleRank1" maxlength="20" style="width: 280px;" placeholder="填则禁，不填则可改"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 130px;text-align: right;">是否有效</label>
        <div class="layui-input-inline">
            <select name="whetherValid" lay-filter="aihao">
                <option value="1" selected="">是</option>
                <option value="0">否</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 130px;text-align: right;">权     限</label>
        <div class="layui-input-block" >
            <div id="treeSelect-div-1579586747821" class="layui-treeselect layui-form-select layui-unselect" style="padding-top: 20px;">
                <div id="test13" class="demo-tree-more">

                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 130px;text-align: right;">角色描述</label>
        <div class="layui-input-block">
            <textarea name="roleRemark" style="width: 97%;" id="comments" placeholder="请输入内容"
                      class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button type="button" class="layui-btn" lay-submit="" lay-filter="myform">立即提交</button>
        </div>
    </div>
<!--    <input type="button" value="提交" id="btn">-->
<!--    <input type="button" value="选中" id="btn1">-->
</form>
</body>
<!--<script type="text/javascript" src="../../../res/eleTree/layui/lay/mymodules/eleTree.js"></script>-->
<script>
    //版本号
    /*$(function(){

        alert(layui.v);

    });*/
    layui.config({
        base: "/res/eleTree/layui/lay/mymodules/"
    }).use(['form','jquery','table','tree','eleTree','code', 'util', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , code = layui.code
            ,tree = layui.tree
            ,util = layui.util
        ,$ = layui.$
        //模拟数据1
    ,data1 = null;//模拟数据
        var table = layui.table;
    var eleTree = layui.eleTree;
        //显示所有模块
        var url = "/perModule/showAllModuleCheckbox";
        //无连接线风格
        var el5=null;
        el5 = eleTree.render({
            method:"post",
            elem: '#test13'
            ,showCheckbox:true
            ,showLine:true
            ,url: url   //返回是一个map json
            ,id:"#treeId1"
          //  ,skin: 'sidebar'
            ,defaultExpandAll: true
            ,highlightCurrent: true
            ,checkStrictly:false
            ,expandOnClickNode: true //是否仅允许节点左侧图标控制展开收缩。默认 false（即点击节点本身也可控制）。若为 true，则只能通过节点左侧图标来展开收缩
            ,done: function(res){
                el5.unExpandAll() //合并所有
                // res即为你接口返回的信息。
                console.log(res);

                //表单赋值
                var id = getQueryString("id");
                console.info(id);
                if (id) {
                    var url = "/perRole/findById/"+id;
                    $.get(url, null, function (obj) {
                        //表单赋值
                        form.val('myfrom', obj);
                        console.info(obj);
                        el5.setChecked(obj.moduleAll, true);
                    }, "json");
                }

            }
        });

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //全选
        form.on('checkbox(allChoose)', function (data) {
            console.info(data);
            $("input[same='eleTree-node']").each(function () {
                this.checked = data.elem.checked;
                 console.log($(this).val());
            });
        });
        function getChecked(){
            var checkedData = tree.getChecked("getyyy"); //获取选中节点的数据
            layer.alert(JSON.stringify(checkedData), {shade:0});
            console.log(checkedData);
        }


        //监听提交
        form.on('submit(myform)', function (data) {
            //获取所有的节点数据 包括父节点id
            var obj = el5.getChecked(false,true);
            console.info(el5.getChecked(false,true));
            //获取所选中的ID 不包括父节点id
            // var obj = el5.getChecked(true);
            //将选中的对象里面的id 放到数组
            var moduleIdArr = [];
            if(obj!=null){
                $.each(obj,function (index,item) {
                    moduleIdArr.push(item.id);
                })
                console.info(moduleIdArr);
            }
            //设置所选模块参数
            var formData = new FormData(document.getElementById("myfrom1"));
            formData.append("moduleAll", moduleIdArr);
            $.ajax({
                url: "/perRole/addOrUpdateRole",
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                type: 'POST',
                success: function (obj) {
                    if(obj.status==20){
                        parent.closeOpen(obj.message)
                    }else if(obj.numberMes==-1){
                        parent.errorCloseOpen(obj.message)
                    }else{
                        parent.closeOpen(obj.message)
                    }
                },
                error: function () {

                }
            })
            return false;
        });




        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });


        $(function () {
            //文件查看
            $('#imgFile').change(function () {
                //获取input file的files文件数组;
                //$('#usersImage')获取的是jQuery对象，.get(0)转为原生对象;
                //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
                var file = $('#imgFile').get(0).files[0];
                //创建用来读取此文件的对象
                var reader = new FileReader();
                //使用该对象读取file文件
                reader.readAsDataURL(file);
                //读取文件成功后执行的方法函数
                reader.onload = function (e) {
                    //读取成功后返回的一个参数e，整个的一个进度事件
                    console.log(e);
                    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
                    //的base64编码格式的地址
                    $('#prePic').get(0).src = e.target.result;
                }
            });
        })

    });
    /**
     得到地址栏的参数
     */
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
</script>
</html>
